// 加载 form 模块
let form = layui.form;

// -------------------------  获取所有的类别，通过模板引擎渲染到页面中 ------------------------

function renderCategory() {
  $.ajax({
    url: '/my/article/cates',
    success: function (res) {
      // console.log(res);
      if (res.status === 0) {
        // 使用模板引擎渲染
        // let htmlStr = template('模板id', 对象形式的数据);
        let htmlStr = template('tpl-list', res)
        $('tbody').html(htmlStr);  //追加到页面
      }
    }
  })
}
renderCategory();     //渲染页面  

// layer.msg(res.message); //弹出层 提示信息  不管成功还是没有成功都提示用户

// -------------------------  添加 --- 点击添加类别出现弹层 ------------------------弹出层
let addIndex;  // 弹层 
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加文章分类',
    content: $('#tpl-add').html(),
    area: ['500px', '250px']
  });
})
// 必须以事件委托的方式注册事件
$('body').on('submit', "#add-form", function (ev) {
  ev.preventDefault();
  let data = $(this).serialize();
  console.log(data);
  $.ajax({
    type: 'post',
    url: '/my/article/addcates',
    data,
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        renderCategory();
        layer.close(addIndex);   //  layer.close(index) - 关闭特定层  因为添加后需要关闭弹出层
      }
    }
  })
})
// -------------------------  编辑 --- 点击编辑按钮出现弹层 ------------------------
let editIndex;
$('tbody').on('click', 'button:contains("编辑")', function () {
  // 获取事件源的三个自定义属性（data-id/name/alias）
  let data = $(this).data(); // data() 方法，不传递参数，获取的是元素的全部 data-xxx 属性
  console.log(data);
  // 必须等弹层出来之后，然后在设置输入框的默认值
  editIndex = layer.open({
    type: 1,
    title: '修改文章分类',
    content: $('#tpl-edit').html(),  //是编辑的内容的区域
    area: ['500px', '250px'],
    // 数据回填   所在元素属性 lay-filter="" 对应的值 第二个值是获取到的值}
    success: function () {
      form.val('abcd', data)
    }
  });
})



// 完成编辑    获取 到name  alias  Id
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  let data = $(this).serializeArray(); //搜集所有的值返回的是一个数组套对象的结构
  let i = data.findIndex(val => val.name == 'id')  //接口要的id 是大写  所以把从数组中把name是id的值找出来
  data[i].name = 'Id' //换为大写 
  console.log(data);
  $.ajax({
    url: '/my/article/updatecate',
    type: 'POST',
    data,
    success: function (res) {
      console.log(res);
      layer.msg(res.message);
      if (res.status === 0) {
        renderCategory();
        layer.close(editIndex)
      }
    }
  })
})


// -------------------------  删除 --------------------------------------------
// 使用事件委托的方式，注册单击事件
$('body').on('click', 'button:contains("删除")', function () {
  let id = $(this).data('id');  // data方法，是jquery封装的方法，专门用于获取元素的 data-xxx 属性值

  layer.confirm('确认删除吗?', function (index) {
    $.ajax({
      url: '/my/article/deletecate/' + id,
      success: function (res) {
        layer.msg(res.message); //提示层
        if (res.status === 0) {
          renderCategory();  //删除成功后需要重新渲染页面
        }
      }
    })
    layer.close(index);
  });

})
